<template>
  <div class="page">
    <h1>ProTable 的使用</h1>

    <ProTable
      :request="request"
      :default-sort="{ prop: 'createTime', order: 'ascending' }"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="标识" prop="label" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="创建时间" prop="createTime" sortable="custom" />
      <el-table-column label="更新时间" prop="updateTime" sortable="custom" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-space>
            <el-button type="default" text bg> 编辑 </el-button>
            <el-button type="danger" text bg> 删除 </el-button>
          </el-space>
        </template>
      </el-table-column>
    </ProTable>

    <hr />

    <!-- <ProTable>
      <el-table-column label="表2列1"></el-table-column>
      <el-table-column label="表2列2"></el-table-column>
    </ProTable> -->
  </div>
</template>

<script>
import { getSysRolePage } from "@/api/sys";
import ProTable from "@/components/pro-table/index.vue";

export default {
  name: "Test2",

  components: {
    ProTable,
  },

  methods: {
    async request(query) {
      console.log("request", query);
      const { list, pagination } = await getSysRolePage({
        page: query.currentPage,
        size: query.pageSize,
        sort: query.order ? query.order.replace("ending", "") : "",
        order: query.prop, // 排序字段
      });

      return {
        list,
        total: pagination.total,
      };
    },
  },
};
</script>
